<template>
  <div class="details">
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="goBack" />

    <div class="content">
      <!-- 商品详情图片 -->
      <details-image :imageUrl="datas.image1"></details-image>

      <!-- 商品详情信息 -->
      <detailsInfo :name="datas.name" :price="datas.presentPrice"></detailsInfo>

      <!-- 商品详情 -->
      <goodsDetails :detail="datas.detail"></goodsDetails>

      <!-- 购物车 -->
      <shopcar @showSku="showSku"></shopcar>

      <!-- 商品sku -->
      <transition name="sku">
        <sku v-if="skuBool" @closeSku="closeSku" :datas="datas"></sku>
      </transition>
    </div>
  </div>
</template>

<script>
import * as api from "@/request/api/details.js"

import detailsImage from "./components/detailsImage"
import detailsInfo from "./components/detailsInfo"
import goodsDetails from "./components/goodsDetails"
import shopcar from "./components/shopcar"
import sku from "./components/sku"

export default {
  props:['id'],
  components:{
    detailsImage,
    detailsInfo,
    goodsDetails,
    shopcar,
    sku
  },
  data(){
    return{
      datas:{},//数据对象
      skuBool:false//是否显示sku弹窗
    }
  },
  methods:{
    async API_getDetailGoodsInfo(goodsId){//获取详情页信息
      return await api.getDetailGoodsInfo({
        goodsId
      })
    },
    goBack(){//返回上一页
      this.$router.go(-1)
    },
    showSku(){//显示sku弹窗
      this.skuBool = true
    },
    closeSku(){//关闭sku弹窗
      this.skuBool = false
    }
  },
  async activated(){//激活
    let res = await this.API_getDetailGoodsInfo(this.id)
    this.datas = res.data.data
    console.log(this.datas)
  }
}
</script>

<style lang="scss">
@import "@/style/details/details";
.sku-enter,.sku-leave-to{
  opacity: 0;
}
.sku-enter-active,.sku-leave-active{
  transition: all 0.5s;
}
</style>
